<template>
  <div class="user-profile">
    <h1>用户信息</h1>
    <div class="user-info">
      <p>用户名: {{ user.username }}</p>
      <p>会员等级: {{ user.role }}</p>
    </div>
    
    <div class="logo-history">
      <h2>我的Logo设计</h2>
      <div class="logo-grid">
        <div 
          v-for="(logo, index) in logos" 
          :key="index"
          class="logo-item"
        >
          <img :src="logo.image" :alt="logo.name" />
          <p>{{ logo.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'UserProfile',
  setup() {
    const user = ref({
      username: '设计达人',
      role: '高级会员',
      joinDate: '2023-01-15',
      designsCount: 12
    });
    
    const logos = ref([
      { 
        name: '科技公司Logo', 
        image: 'https://via.placeholder.com/150/007acc',
        createdAt: '2023-05-10',
        downloads: 24
      },
      { 
        name: '咖啡店Logo', 
        image: 'https://via.placeholder.com/150/795548',
        createdAt: '2023-04-22',
        downloads: 18
      },
      { 
        name: '健身中心Logo', 
        image: 'https://via.placeholder.com/150/4caf50',
        createdAt: '2023-03-05',
        downloads: 32
      }
    ]);
    
    return {
      user,
      logos
    };
  }
});
</script>

<style scoped>
.user-profile {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.user-info {
  margin-bottom: 2rem;
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.logo-item {
  border: 1px solid #ddd;
  padding: 1rem;
  text-align: center;
}
.logo-item img {
  max-width: 100%;
  height: auto;
}
</style>